<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 删除和修改
        // remove(node)    删除指定的节点
        // replaceChild(新节点，旧节点)   用新节点替换旧节点     

    </script>
</head>
<body>
    <ul>
        <li>
            <img src="./示例-DOM/images/f01.jpg" alt="" srcset="" id="id1">
            <p><input type="button" value="删除我！" onclick="del()"></p>
        </li>
         <li>
            <img src="./示例-DOM/images/f02.jpg" alt="" srcset="" id="id2">
            <p><input type="button" value="替换我！" onclick="rep()"></p>
        </li>
    </ul>


    <script>
        function del(){
            let delNode = document.getElementById("id1");
            delNode.parentElement.removeChild(delNode);///必须是父节点删除子节点，不能自己删自己
        }
        function rep(){
            let oldNode = document.getElementById("id2");
            let newNode = document.createElement("img");
            newNode.setAttribute("src","./示例-DOM/images/f03.jpg");
            oldNode.parentElement.replaceChild(newNode,oldNode)//必须是父节点替换子节点
        }
    </script>
    
</body>
</html>